import { Button, Typography, Flex } from 'antd'
import './index.scss'
const { Title } = Typography;
const HCTitle = ({ title = '标题', btnGroup = [], ...props}) => {
  const handleBtnClick = (btn) => {
    const { action } = btn;
    try {
      props[action]();
    } catch (error) {
      console.error(`${action} is not a function or it is undefined: ${error}`);
    }
  }
  return (
    <Flex className='hc-title' justify="space-between" align="center">
      <Title level={4} style={{margin: 0}}>{title}</Title>
      <div className="right-btn-group">
        <Flex gap="small">
          {btnGroup.map(item => {
            return <Button key={item.action} type={item.type} danger={item.danger} onClick={e => handleBtnClick(item)}>{item.text}</Button>
          })}
        </Flex>
      </div>
    </Flex>
  )
}

export default HCTitle